Ext.onReady(function()
{	
	var manufacturerStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'ManufacturerAction_jsonList.action',
        root: 'manufacturerList',
        fields: ['name']
		});
	    
    var carStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'CarAction_jsonList.action',
        root: 'carList',
        fields: ['modelName']
		});
    
    var gameNameStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'GameAction_jsonList.action',
        root: 'gameList',
        fields: ['name']
		});
    
    var gameVersionStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'GameAction_jsonListByGameName.action',
        root: 'gameList',
        fields: ['version']
		});
    
	var physics = [['All'], ['Pro'], ['Std']];
	
	var tyres = [['N3'], ['N2'], ['N1'], ['S3'], ['S2'], ['S1'], ['R3'], ['R2'], ['R1']];
	
    var physicsStore = new Ext.data.ArrayStore({
        fields: ['physics'],
        data : physics
    });
    
    var tyresStore = new Ext.data.ArrayStore({
        fields: ['tyres'],
        data : tyres
    });
    
	var trackStore = new Ext.data.JsonStore({
        autoLoad: true,  //autoload the data
        url: 'TrackAction_jsonList.action',
        root: 'trackList',
        fields: ['name']
	});
        
    var manufacturerComboBox = new Ext.form.ComboBox({
		x: 141,
		y: 30,
		width:200,
		cls: 'gt-tunes-absolute-component',
		fieldLabel: 'Manufacturer',
		hiddenName: 'manufacturerName',
		store: manufacturerStore,
        displayField:'name',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        listeners: {'select': manufacturerSelected }

	});
    
    var carComboBox = new Ext.form.ComboBox({
    	x: 141,
    	y: 56,
    	width:200,
    	cls: 'gt-tunes-absolute-component',
    	fieldLabel: 'Model',
		hiddenName: 'carModelName',
		store: carStore,
        displayField:'modelName',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        disabled: true
	});
    
    var gameNameComboBox = new Ext.form.ComboBox({
    	x: 141,
    	y: 82,
    	width:200,
    	cls: 'gt-tunes-absolute-component',
    	fieldLabel: 'Game',
		hiddenName: 'gameName',
		store: gameNameStore,
        displayField:'name',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        listeners: {'select': gameNameSelected }

	});
    
    var gameVersionComboBox = new Ext.form.ComboBox({
    	x: 141,
    	y: 108,
    	width:200,
    	cls: 'gt-tunes-absolute-component',
    	fieldLabel: 'Version',
		hiddenName: 'gameVersion',
		store: gameVersionStore,
        displayField:'version',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true,
        disabled: true
	});
    
    var physicsComboBox = new Ext.form.ComboBox({
    	x: 141,
    	y: 134,
    	width: 85,
    	cls: 'gt-tunes-absolute-component',
    	fieldLabel: 'Physics',
		hiddenName: 'physics',
		store: physicsStore,
        displayField:'physics',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'All',
        selectOnFocus:true
	});
    
    var tyresFrontComboBox = new Ext.form.ComboBox({
        x: 141,
        y: 296,
		width: 85,
    	cls: 'gt-tunes-absolute-component',
    	fieldLabel: 'Tyres',
		hiddenName: 'tyres',
		store: tyresStore,
        displayField:'tyres',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        selectOnFocus:true
	});
    
    var tyresRearComboBox = new Ext.form.ComboBox({
        x: 256,
        y: 296,
		width: 85,
    	cls: 'gt-tunes-absolute-component',
    	fieldLabel: 'Tyres',
		hiddenName: 'tyres',
		store: tyresStore,
        displayField:'tyres',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        selectOnFocus:true
	});
    
	var trackComboBox = new Ext.ux.form.LovCombo({
		cls: 'gt-tunes-absolute-component',
		width:200,
		x: 141,
	    y: 372,
		hideOnSelect:false,
		maxHeight:200,
		store:trackStore,
		triggerAction:'all',
		valueField:'name',
		displayField:'name',
		beforeBlur: Ext.emptyFn,
		mode:'local'
	});
    
    function manufacturerSelected()
    {
    	Ext.Ajax.request({
			url: 'CarAction_jsonListByManufacturer.action',
			params: { manufacturerName : manufacturerComboBox.value},
			callback :  carListByManufacturerCallback
		});
    }
    
    function carListByManufacturerCallback(options, success, response)
    {	
    	if (success)
    	{
    		var jsonData = Ext.decode(response.responseText);
    		carComboBox.clearValue();
    		carStore.loadData(jsonData);
    		carComboBox.enable();
    	}
    	else
    	{
    		Ext.Msg.show({			
    			title : 'Error',
    		   	msg: 'Data could not be saved to server',				   
    		   	icon: Ext.MessageBox.ERROR,
    		   	buttons: Ext.Msg.OK
    		});	
    	}
    }
    
    function gameNameSelected()
    {
    	Ext.Ajax.request({
			url: 'GameAction_jsonListByGameName.action',
			params: { gameName : gameNameComboBox.value},
			callback :  gameListByGameNameCallback
		});
    }
    
    function gameListByGameNameCallback(options, success, response)
    {	
    	if (success)
    	{
    		var jsonData = Ext.decode(response.responseText);
    		gameVersionComboBox.clearValue();
    		gameVersionStore.loadData(jsonData);
    		gameVersionComboBox.enable();
    	}
    	else
    	{
    		Ext.Msg.show({			
    			title : 'Error',
    		   	msg: 'Data could not be saved to server',				   
    		   	icon: Ext.MessageBox.ERROR,
    		   	buttons: Ext.Msg.OK
    		});	
    	}
    }
    
    
	// Create variable "form_column_layout" that will be the instantiate of Ext.FormPanel
	var form_column_layout = new Ext.FormPanel({
		labelWidth: 120,      // Width of labels
		labelAlign: 'right', // Valid values: "left", 'top", and "right" (defaults: "left")
	    url:'save-form.php', // The URL to use for form actions
		frame:true, // True to render the panel with custom rounded borders
	                    // False to render with plain 1px square border (default: false)
		title: 'Tune Detail',  // Form title
		width: 800, // The width of this element in pixel (default: auto)
		height: 600, // The width of this element in pixel (default: auto)
		renderTo: 'tune-detail',
		layout: 'absolute',  // Define it to get the Column Layout Style
		
		
		items: [ 
			    
		        {
                    xtype:'label',
                    text: "Manufacturer:",
                    name: 'manufacturerLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 30
		        },
			    manufacturerComboBox,
		        {
                    xtype:'label',
                    text: "Model:",
                    name: 'modelLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 56
		        },
				carComboBox,
		        {
                    xtype:'label',
                    text: "Game:",
                    name: 'gameLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 82
		        },
				gameNameComboBox,
		        {
                    xtype:'label',
                    text: "Version:",
                    name: 'versionLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 108
		        },
		        gameVersionComboBox,
		        {
                    xtype:'label',
                    text: "Physics:",
                    name: 'physicsLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 134
		        },
		        physicsComboBox,
		        
		        
		        {
                    xtype:'label',
                    text: "Performance Points:",
                    name: 'performancePointsLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 184
		        },
		        {
					xtype: 'spinnerfield',
                    x: 141,
                    y: 184,
					cls: 'gt-tunes-absolute-component-spinner',
	            	fieldLabel: 'Performance Points',
	            	name: 'performancePointsSpinner',
	            	value: 600,
	            	minValue: 0,
	            	maxValue: 1200,
	            	incrementValue: 1,
	            	alternateIncrementValue: 10,
	            	accelerate: true
            	},		       
            	{
                    xtype:'label',
                    text: "Power (offset):",
                    name: 'powerLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 210
		        },
	            {
					xtype: 'spinnerfield',
                    x: 141,
                    y: 210,
                    cls: 'gt-tunes-absolute-component-spinner',
	            	fieldLabel: 'Power (offset)',
	            	name: 'powerSpinner',
	            	value: 0,
	            	minValue: -50,
	            	maxValue: 50,
	            	incrementValue: 1,
	            	alternateIncrementValue: 10,
	            	accelerate: true
            	},
               	{
                    xtype:'label',
                    text: "Weight:",
                    name: 'weightLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 236
		        },
	            {
					xtype: 'spinnerfield',
                    x: 141,
                    y: 236,
                    cls: 'gt-tunes-absolute-component-spinner',
	            	fieldLabel: 'Weight (%)',
	            	name: 'weightSpinner',
	            	value: 100,
	            	minValue: 85,
	            	maxValue: 115,
	            	incrementValue: 1,
	            	alternateIncrementValue: 10,
	            	accelerate: true
            	},
               	{
                    xtype:'label',
                    text: "Front",
                    name: 'leftColumnFrontLabel',
                    cls: 'gt-tunes-absolute-component-label-centred',
                    height: 20,
                    x: 141,
                    y: 276
		        },
               	{
                    xtype:'label',
                    text: "Rear",
                    name: 'leftColumnRearLabel',
                    cls: 'gt-tunes-absolute-component-label-centred',
                    height: 20,
                    x: 256,
                    y: 276
		        },
               	{
                    xtype:'label',
                    text: "Tyres:",
                    name: 'tyresLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 296
		        },
		        tyresFrontComboBox,
		        tyresRearComboBox,
		        {
                    xtype:'label',
                    text: "Aerodynamics:",
                    name: 'aerodynamicsLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 322
		        },
		        {
					xtype: 'spinnerfield',
                    x: 141,
                    y: 322,
                    cls: 'gt-tunes-absolute-component-spinner',
	            	name: 'aerodynamicsFrontSpinner',
	            	value: 0,
	            	minValue: 0,
	            	maxValue: 200,
	            	incrementValue: 1,
	            	alternateIncrementValue: 10,
	            	accelerate: true
            	},		        
		        {
					xtype: 'spinnerfield',
                    x: 256,
                    y: 322,
                    cls: 'gt-tunes-absolute-component-spinner',
	            	name: 'aerodynamicsRearSpinner',
	            	value: 0,
	            	minValue: 0,
	            	maxValue: 200,
	            	incrementValue: 1,
	            	alternateIncrementValue: 10,
	            	accelerate: true
            	},
		        {
                    xtype:'label',
                    text: "Track(s):",
                    name: 'tracksLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 16,
                    y: 372
		        },
		        trackComboBox,
		        
		        //----------------------------------------------------            	
            	
               	{
                    xtype:'label',
                    text: "Front",
                    name: 'rightColumnFrontLabel',
                    cls: 'gt-tunes-absolute-component-label-centred',
                    height: 20,
                    x: 510,
                    y: 5
		        },
               	{
                    xtype:'label',
                    text: "Rear",
                    name: 'rightColumnRearLabel',
                    cls: 'gt-tunes-absolute-component-label-centred',
                    height: 20,
                    x: 625,
                    y: 5
		        },
		        {
                    xtype:'label',
                    text: "Ride Height (mm):",
                    name: 'rideHeightLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 120,
                    x: 390,
                    y: 30
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 30,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'rideHeightFrontSpinner',
	            	value: 0,
	            	minValue: -100,
	            	maxValue: 100,
	            	allowDecimals: false,
	            	incrementValue: 1,
	            	alternateIncrementValue: 5,
	            	accelerate: true
            	},
	            {
					xtype: 'spinnerfield',
                    x: 625,
                    y: 30,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'rideHeightRearSpinner',
	            	value: 0,
	            	minValue: -100,
	            	maxValue: 100,
	            	allowDecimals: false,
	            	incrementValue: 1,
	            	alternateIncrementValue: 5,
	            	accelerate: true
            	},
		        {
                    xtype:'label',
                    text: "Spring Rate:",
                    name: 'springRateLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 120,
                    x: 390,
                    y: 56
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 56,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'springRateFrontSpinner',
	            	value: 1,
	            	minValue: 1,
	            	maxValue: 20,
	            	allowDecimals: true,
	            	incrementValue: 1,
	            	alternateIncrementValue: 4,
	            	accelerate: true
            	},
	            {
					xtype: 'spinnerfield',
                    x: 625,
                    y: 56,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'springRateRearSpinner',
	            	value: 1,
	            	minValue: 1,
	            	maxValue: 20,
	            	allowDecimals: true,
	            	incrementValue: 1,
	            	alternateIncrementValue: 4,
	            	accelerate: true
            	},
		        {
                    xtype:'label',
                    text: "Damper:",
                    name: 'damperLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 120,
                    x: 390,
                    y: 82
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 82,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'damperFrontSpinner',
	            	value: 1,
	            	minValue: 1,
	            	maxValue: 10,
	            	allowDecimals: true,
	            	incrementValue: 1,
	            	alternateIncrementValue: 2,
	            	accelerate: true
            	},
	            {
					xtype: 'spinnerfield',
                    x: 625,
                    y: 82,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'damperRearSpinner',
	            	value: 1,
	            	minValue: 1,
	            	maxValue: 10,
	            	allowDecimals: true,
	            	incrementValue: 1,
	            	alternateIncrementValue: 2,
	            	accelerate: true
            	},
		        {
                    xtype:'label',
                    text: "Toe (in/out):",
                    name: 'toeLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 120,
                    x: 390,
                    y: 108
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 108,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'toeFrontSpinner',
	            	value: 0.00,
	            	minValue: -0.50,
	            	maxValue: 0.50,
	            	allowDecimals: true,
	            	decimalPrecision: 2,
	            	incrementValue: 0.01,
	            	alternateIncrementValue: 0.1,
	            	accelerate: true
            	},
	            {
					xtype: 'spinnerfield',
                    x: 625,
                    y: 108,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'toeRearSpinner',
	            	value: 0.00,
	            	minValue: -0.50,
	            	maxValue: 0.50,
	            	allowDecimals: true,
	            	decimalPrecision: 2,
	            	incrementValue: 0.01,
	            	alternateIncrementValue: 0.1,
	            	accelerate: true
            	},
		        {
                    xtype:'label',
                    text: "Camber Angle:",
                    name: 'camberLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 120,
                    x: 390,
                    y: 134
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 134,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'camberFrontSpinner',
	            	value: 0.0,
	            	minValue: -0.0,
	            	maxValue: 10.0,
	            	allowDecimals: true,
	            	decimalPrecision: 1,
	            	incrementValue: 0.1,
	            	alternateIncrementValue: 1.0,
	            	accelerate: true
            	},
	            {
					xtype: 'spinnerfield',
                    x: 625,
                    y: 134,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'camberRearSpinner',
	            	value: 0.0,
	            	minValue: -0.0,
	            	maxValue: 10.0,
	            	allowDecimals: true,
	            	decimalPrecision: 1,
	            	incrementValue: 0.1,
	            	alternateIncrementValue: 1.0,
	            	accelerate: true
            	},
		        {
                    xtype:'label',
                    text: "Brake Balance:",
                    name: 'brakeBalanceLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 120,
                    x: 390,
                    y: 160
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 160,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'brakeBalanceFrontSpinner',
	            	value: 1,
	            	minValue: 1,
	            	maxValue: 10,
	            	allowDecimals: true,
	            	incrementValue: 1,
	            	alternateIncrementValue: 2,
	            	accelerate: true
            	},
	            {
					xtype: 'spinnerfield',
                    x: 625,
                    y: 160,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'brakeBalanceRearSpinner',
	            	value: 1,
	            	minValue: 1,
	            	maxValue: 10,
	            	allowDecimals: true,
	            	incrementValue: 1,
	            	alternateIncrementValue: 2,
	            	accelerate: true
            	},
		        {
                    xtype:'label',
                    text: "F/R Torque Distribution:",
                    name: 'torqueDistributionLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 120,
                    x: 390,
                    y: 186
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 186,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'torqueDistributionFrontSpinner',
	            	value: 50,
	            	minValue: 0,
	            	maxValue: 100,
	            	allowDecimals: false,
	            	incrementValue: 5,
	            	alternateIncrementValue: 20,
	            	accelerate: true
            	},
	            {
					xtype: 'spinnerfield',
                    x: 625,
                    y: 186,
                    cls: 'gt-tunes-absolute-component-spinner',
	               	name: 'torqueDistributionRearSpinner',
	            	value: 50,
	            	minValue: 0,
	            	maxValue: 100,
	            	allowDecimals: false,
	            	incrementValue: 5,
	            	alternateIncrementValue: 20,
	            	accelerate: true
            	},
            	{
                    xtype:'label',
                    text: "Max Turning Angle:",
                    name: 'performancePointsLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 390,
                    y: 236
		        },
		        {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 236,
                    cls: 'gt-tunes-absolute-component-spinner',
	            	name: 'maxTurningAngleSpinner',
	            	value: 40,
	            	minValue: 30,
	            	maxValue: 50,
	            	incrementValue: 1,
	            	alternateIncrementValue: 4,
	            	accelerate: true
            	},		       
            	{
                    xtype:'label',
                    text: "Traction Control:",
                    name: 'tractionControlLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 390,
                    y: 262
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 262,
                    cls: 'gt-tunes-absolute-component-spinner',
	            	name: 'tractionControlSpinner',
	            	value: 0,
	            	minValue: 0,
	            	maxValue: 10,
	            	incrementValue: 1,
	            	alternateIncrementValue: 2,
	            	accelerate: true
            	},
               	{
                    xtype:'label',
                    text: "ABS:",
                    name: 'ABSLabel',
                    cls: 'gt-tunes-absolute-component-label-right',
                    height: 20,
                    width: 125,
                    x: 390,
                    y: 288
		        },
	            {
					xtype: 'spinnerfield',
                    x: 510,
                    y: 288,
                    cls: 'gt-tunes-absolute-component-spinner',
	            	name: 'ABSSpinner',
	            	value: 1,
	            	minValue: 0,
	            	maxValue: 10,
	            	incrementValue: 1,
	            	alternateIncrementValue: 2,
	            	accelerate: true
            	},
			],

			buttons: [{
				text: 'Submit'  // Define the button for Form
		}]
	});
});